<template>
  <Card>
    <div class="flexCSB">
      <Button type="primary" @click="getAdd">新增活动</Button>
        <Button type="info" @click="Exprot">批量导出二维码</Button>
      <div>
        <Input style="width: 300px" v-model="name" placeholder="请输入活动名称" suffix="ios-search"
          @on-enter="enterName"></Input>
      </div>

     
    </div>
   
    <Table class="table" :loading="loading1" highlight-row :columns="columns" :data="tableData" @on-selection-change="getSelectChange"></Table>
    <Page show-total class="page" :total="total" :current.sync="pageNum" :page-size="pageSize" show-elevator
      @on-change="changePage" />
    <Modal :title="modelTitle" v-model="modal" :closable="false" :mask-closable="false" width="60">
      <Form ref="form" :model="exhibition" :rules="ruleValidate" :label-width="100" inline>
        <div>
        </div>
        <FormItem label="活动名称" prop="name">
          <Input v-model="exhibition.name" placeholder="请输入活动名称" style="width: 300px; margin-left: 0px"></Input>
        </FormItem>

        <FormItem label="起止时间" prop="time">
          <DatePicker type="daterange" placeholder="选择起止时间" style="width: 300px; margin-left: 0px"
            v-model="exhibition.time" @on-change="changeOrder"></DatePicker>
        </FormItem>
        <FormItem label="类别标签" prop="category">
          <Input v-model="exhibition.category" placeholder="请输入类别标签" style="width: 300px; margin-left: 0px"></Input>
        </FormItem>
        <FormItem label="地点" prop="location">
          <Input v-model="exhibition.location" placeholder="请输入地点" style="width: 300px; margin-left: 0px"></Input>
        </FormItem>
        <FormItem label="购票须知" prop="notice">
          <Input v-model="exhibition.notice" placeholder="请输入购票须知" style="width: 300px; margin-left: 0px"></Input>
        </FormItem>
        <FormItem label="注意事项" prop="matter">
          <Input v-model="exhibition.matter" placeholder="请输入注意事项" style="width: 300px; margin-left: 0px"></Input>
        </FormItem>
        <FormItem label="封面图" prop="pic">
          <div style="width: 300px">
            <vue-uploadimg :imgUrl="imgUrl" :clear="clear1" @uploadImg="uploadImg"></vue-uploadimg>
          </div>
        </FormItem>
        <FormItem label="浮层图">
          <div style="width: 300px">
            <vue-uploadimg :imgUrl="floatingLayer" :clear="clear3" @uploadImg="uploadImgF"></vue-uploadimg>
          </div>
        </FormItem>
        <FormItem label="介绍轮播图">
          <div style="width: 500px">
            <vue-uploadimgmore :imgUrl="gallery" :clear="clear2" @uploadImg="uploadImgList"></vue-uploadimgmore>
          </div>
        </FormItem>

        <FormItem label="活动介绍" prop="about">
          <editoritem :value="editorData" @catchData="catchData"></editoritem>
        </FormItem>

        <div style="margin-left: 30px; margin-bottom: 20px">
          <Button type="success" @click="addTicket">增加票种</Button>
          <Button style="margin-left: 20px" @click="reduceTicket">减少票种</Button>
        </div>
        <div v-for="(item, index) in ticketList" :key="index">
          <FormItem label="票种名称" style="position: relative">
            <Input v-model="item.typeName" placeholder="请输入票种名称" style="width: 300px; margin-left: 0px"></Input>
            <div v-show="isCustom" style="position: absolute; top: 30px; left: 0; color: #ed4014">
              {{ item.typeName ? "" : "请输入票种名称" }}
            </div>
          </FormItem>

          <FormItem label="价格" style="position: relative">
            <InputNumber v-model="item.price" placeholder="请输入票种价格" :step="1" :min="0"
              style="width: 300px; margin-left: 0px"></InputNumber>
            <div v-show="isCustom" style="position: absolute; top: 30px; left: 0; color: #ed4014">
              {{ item.price ? "" : "请输入票种价格" }}
            </div>
          </FormItem>
          <FormItem label="备注" style="position: relative">
            <Input v-model="item.remark" placeholder="请输入票种备注" style="width: 300px; margin-left: 0px"></Input>
            <div v-show="isCustom" style="position: absolute; top: 30px; left: 0; color: #ed4014">
              {{ item.remark ? "" : "请输入票种备注" }}
            </div>
          </FormItem>
          <div style="width: 90%; margin: 20px auto; border-top: 1px solid #dddddd"></div>
        </div>
        <div style="width: 100%; text-align: right">
          <Form-item>
            <Button type="primary" @click="handleSubmit('form')">提交</Button>
            <Button @click="handleReset('form')" style="margin-left: 8px">取消</Button>
          </Form-item>
        </div>
      </Form>
      <div slot="footer">
        <!-- <Button
          class="Button"
          type="primary"
          @click="submit"
          :loading="loading2"
          >确认提交</Button
        > -->
      </div>
    </Modal>
  </Card>
</template>

<script>
import editoritem from '../../components/wangeditor.vue'
import axios from 'axios'
export default {
  components: {
    editoritem
  },
  data() {
    return {
      ind: 1,
      indx: 1,
      editorData: '',
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        { title: '活动名称', key: 'name', align: 'center', width: 150 },
        // { title: "活动介绍", key: "about", align: "center", width: 150 },
        {
          title: '开始日期',
          key: 'beginDate',
          align: 'center',
          width: 150
        },
        { title: '结束日期', key: 'endDate', align: 'center', width: 150 },
        {
          title: '类别标签',
          key: 'category',
          align: 'center',
          width: 150
        },
        {
          title: '地点',
          key: 'location',
          align: 'center',
          width: 150
        },
        {
          title: '购票须知',
          key: 'notice',
          align: 'center',
          width: 150
        },
        {
          title: '注意事项',
          key: 'matter',
          align: 'center',
          width: 150
        },
        {
          title: '封面图',
          key: 'matter',
          align: 'center',
          width: 150,
          render: (h, params) => {
            return h('img', {
              style: {
                width: '80px',
                display: 'block',
                // marginLeft: "25%",
                marginTop: '10px',
                marginBottom: '10px'
              },
              attrs: {
                src: this.prefix + params.row.pic
              }
            })
          }
        },
        {
          title: '操作',
          align: 'center',
          width: '350px',
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: { type: 'primary' },
                  style: {
                    'margin-left': '10px'
                  },
                  on: {
                    click: () => {
                      this.getUpdate(params)
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: { type: 'error' },
                  style: {
                    'margin-left': '10px'
                  },
                  on: {
                    click: () => {
                      this.del(params)
                    }
                  }
                },
                '删除'
              ),
              h(
                'Button',
                {
                  props: { type: 'info' },
                  style: {
                    'margin-left': '10px'
                  },
                  on: {
                    click: () => {
                      this.Export(params)
                    }
                  }
                },
                '导出二维码'
              )
            ])
          }
        }
      ],
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loading1: false,
      loading2: false,
      ids: [],
      modal: false,
      exhibition: {
        name: '', // 活动名称
        about: '', // 活动简介
        endDate: '', // 结束日期
        beginDate: '', // 开始日期
        category: '', // 类别标签
        floatingLayer: '', // 浮层图
        gallery: [], // 介绍轮播图
        location: '', // 地点
        matter: '', // 注意事项
        notice: '', // 购票须知
        pic: '' // 封面图
      },
      time: [new Date(), new Date()],
      ruleValidate: {
        name: [
          { required: true, message: '活动名称不能为空', trigger: 'blur' }
        ],
        about: [
          { required: true, message: '活动简介不能为空', trigger: 'blur' }
        ],
        time: [
          {
            type: 'array',
            required: true,
            fields: {
              0: { type: 'date', required: true, message: '请选择起止日期' },
              1: { type: 'date', required: true, message: '请选择起止日期' }
            }
          }
        ],
        category: [
          { required: true, message: '类别标签不能为空', trigger: 'blur' }
        ],
        location: [
          { required: true, message: '地点不能为空', trigger: 'blur' }
        ],
        notice: [
          { required: true, message: '购票须知不能为空', trigger: 'blur' }
        ],
        matter: [
          { required: true, message: '注意事项不能为空', trigger: 'blur' }
        ],
        pic: [{ required: true, message: '封面图不能为空', trigger: 'blur' }],
        price: [
          { required: true, message: '票种价格不能为空', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '票种备注不能为空', trigger: 'blur' }
        ],
        typeName: [
          { required: true, message: '票种名称不能为空', trigger: 'blur' }
        ]
      },
      id: '',

      imgUrl: '',
      gallery: [],
      floatingLayer: '',
      clear1: false,
      clear2: false,
      clear3: false,
      name: '',
      modelTitle: '新增活动',
      isCustom: false,
      ticketList: [
        {
          price: null, // 价格
          remark: '', // 备注
          typeName: '' // 	票种名称
        }
      ]
    }
  },
  created() {
    this.getData()
  },
  mounted() { },
  methods: {
    // 获取数据
    //导出二维码
     // 只要选中项发生变化时就会触发，返回值为 selection，已选项
    getSelectChange(selection) {
      // console.log(selection);
      this.ids = selection.map((item) => item.id);
      console.log(this.ids);
    },
    getData() {
      this.loading1 = true
      this.$http(
        '/ztmuseum/stage/toll-activities/getTollActivityList',
        {
          current: this.pageNum,
          size: this.pageSize,
          name: this.name
        },
        'post',
        (res) => {
          console.log(res)
          if (res.data.code == 1000) {
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          } else {
            this.$Message.error(res.data.msg)
          }
          this.loading1 = false
        }
      )
    },
    enterName() {
      this.pageNum = 1
      this.getData()
    },
    // 删除
    del(params) {
      this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http(
            '/ztmuseum/stage/toll-activities/deleteTollActivity',
            {
              id: params.row.id
            },
            'post',
            (res) => {
              console.log(res)
              if (res.data.data == true) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                // this.reload();
                this.pageNum = 1
                this.getData()
              } else {
                this.$message({
                  type: 'error',
                  message: res.data.msg
                })
              }
            }
          )
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //批量导出二维码
    Exprot(){
      let that = this
      console.log(this.ids);
       this.$confirm('此操作将导出该展览二维码， 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
        type: 'warning'
      }).then(() => {
        axios({
          method: 'post',
          url: this.baseUrl + '/ztmuseum/stage/toll-activities/exportTollActivitiesQRCode',
          headers: {
            'token': this.$store.state.token,
            'Content-Type': 'application/json;charset=UTF-8'
          },
          responseType: 'blob',
          data: {
            ids: this.ids
          }
        }).then(function (res) {
          console.log(res)
          that.loading7 = false
          let blob = new Blob([res.data], {
            type: 'application/x-zip-compressed'
          })
          let objectUrl = URL.createObjectURL(blob)
          let a = document.createElement('a')
          a.href = objectUrl
          a.download = '展览二维码'
          a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
          window.URL.revokeObjectURL(blob)
          this.ids=[]
        }).catch(resp => {
          that.loading7 = false
          that.$Message.error('导出二维码失败')
          this.ids=[]
        })
      }).catch(() => {
        this.loading7 = false
        this.ids=[]
      })
    },
    // Export(params) {
    //   this.$confirm('导出二维码, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       this.$http(
    //         '/ztmuseum/stage/toll-activities/exportTollActivitiesQRCode',
    //         {
    //           ids: new Array(params.row.id)
    //         },
    //         'post',
    //         (res) => {
    //           console.log(res)
    //           if (res.data.data != "") {
    //             this.$message({
    //               type: 'success',
    //               message: '导出成功!'
    //             })
    //             that.loading7 = false
    //       let blob = new Blob([res.data], {
    //         type: 'application/x-zip-compressed'
    //       })
    //       let objectUrl = URL.createObjectURL(blob)
    //       let a = document.createElement('a')
    //       a.href = objectUrl
    //       a.download = '展览二维码'
    //       a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
    //       window.URL.revokeObjectURL(blob)
    //       this.ids=[]
                // this.reload();
    //             this.pageNum = 1
    //             this.getData()
    //           } else {
    //             this.$message({
    //               type: 'error',
    //               message:  "导出失败"
    //             })
    //           }
    //         }
    //       )
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消导出'
    //       })
    //     })
    // },

      //导出二维码
      Export (params) {
        console.log("55555555555555555");
      this.ids = [params.row.id]
      let that = this
      this.loading7 = true
      this.$confirm('此操作将导出该展览二维码， 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
        type: 'warning'
      }).then(() => {
        axios({
          method: 'post',
          url: this.baseUrl + '/ztmuseum/stage/toll-activities/exportTollActivitiesQRCode',
          headers: {
            'token': this.$store.state.token,
            'Content-Type': 'application/json;charset=UTF-8'
          },
          responseType: 'blob',
          data: {
            ids: this.ids
          }
        }).then(function (res) {
          console.log(res)
          that.loading7 = false
          let blob = new Blob([res.data], {
            type: 'application/x-zip-compressed'
          })
          let objectUrl = URL.createObjectURL(blob)
          let a = document.createElement('a')
          a.href = objectUrl
          a.download = '展览二维码'
          a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
          window.URL.revokeObjectURL(blob)
          this.ids=[]
        }).catch(resp => {
          that.loading7 = false
          that.$Message.error('导出二维码失败')
          this.ids=[]
        })
      }).catch(() => {
        this.loading7 = false
        this.ids=[]
      })

      // this.modal4 = true
      // this.bottomWords = '微信扫一扫,听语音讲解'
    },

    // 新增活动
    getAdd() {
      this.ind++
      this.indx++
      this.show = false
      this.modal = true
      this.modelTitle = '新增活动'
      this.exhibition = {
        name: '', // 活动简介
        about: '', // 活动简介
        category: '', // 类别标签
        floatingLayer: '', // 浮层图
        gallery: [], // 介绍轮播图
        location: '', // 地点
        matter: '', // 注意事项
        notice: '', // 购票须知
        pic: '', // 封面图
        price: '', // 价格
        remark: '', // 备注
        typeName: '' // 	票种名称
      }
      this.ticketList = [
        {
          price: null, // 价格
          remark: '', // 备注
          typeName: '' // 	票种名称
        }
      ]
      this.clear1 = true
      this.clear2 = true
      this.clear3 = true
      this.editorData = ''
      this.time = [new Date(), new Date()]
      this.id = ''
      this.$refs['form'].resetFields()
      this.imgUrl = ''
    },

    uploadImg(data) {
      this.imgUrl = data
      this.exhibition.pic = data
    },
    uploadImgList(data) {
      console.log(data)
      this.gallery = data
      this.exhibition.gallery = data.map((item) => item.url)
    },
    uploadImgF(data) {
      this.floatingLayer = data
      this.exhibition.floatingLayer = data
    },
    catchData(data) {
      this.editorData = data
    },
    // 新增||修改
    handleSubmit(form) {
      console.log(111)
      this.isCustom = true
      for (let i in this.ticketList) {
        if (
          this.ticketList[i].price &&
          this.ticketList[i].remark &&
          this.ticketList[i].typeName
        ) {
          console.log(true)
        } else {
          console.log(false)
          return false
        }
      }
      this.exhibition.about = this.editorData // 复制为了表单验证
      let that = this
      this.$refs[form].validate((valid) => {
        if (valid) {
          // this.$Message.success("提交成功!");
          console.log(this.exhibition)
          if (this.modelTitle == '新增活动') {
            console.log(444)
            this.$http(
              '/ztmuseum/stage/toll-activities/addTollActivity',
              {
                about: this.exhibition.about,
                beginDate: this.time[0],
                category: this.exhibition.category,
                endDate: this.time[1],
                floatingLayer: this.exhibition.floatingLayer,
                gallery: this.exhibition.gallery,
                location: this.exhibition.location,
                matter: this.exhibition.matter,
                name: this.exhibition.name,
                notice: this.exhibition.notice,
                pic: this.exhibition.pic,
                ticketTypes: this.ticketList
              },
              'post',
              (res) => {
                console.log(res)
                console.log(res.data.data)
                if (res.data.code == 1000) {
                  that.modal = false
                  that.$Message.success(res.data.msg)
                  that.$refs[form].resetFields()
                  this.getData()
                } else {
                  that.$Message.error(res.data.msg)
                }
              }
            )
          } else {
            console.log(333)
            this.$http(
              '/ztmuseum/stage/toll-activities/updateTollActivity',
              {
                about: this.exhibition.about,
                beginDate: this.time[0],
                category: this.exhibition.category,
                endDate: this.time[1],
                id: this.id,
                floatingLayer: this.exhibition.floatingLayer,
                gallery: this.exhibition.gallery,
                location: this.exhibition.location,
                matter: this.exhibition.matter,
                name: this.exhibition.name,
                notice: this.exhibition.notice,
                pic: this.exhibition.pic,
                ticketTypes: this.ticketList
              },
              'post',
              (res) => {
                if (res.data.code == 1000) {
                  that.modal = false
                  that.isCustom = false
                  that.$Message.success(res.data.msg)
                  that.getData()
                } else {
                  that.$Message.error(res.data.msg)
                }
              }
            )
          }
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    handleReset(form) {
      this.modal = false
      this.isCustom = false
      this.$refs[form].resetFields()
    },
    // 分页，改变页码
    changePage(data) {
      console.log(data)
      this.pageNum = data
      this.getData()
    },
    // 时间选择器
    changeOrder(data) {
      console.log(data)
      this.time = data
    },

    getUpdate(params) {
      console.log(params.row)
      this.modal = true
      this.modelTitle = '修改活动'
      this.id = params.row.id
      this.isCustom = false
      this.imgUrl = params.row.pic
      this.gallery = []
      params.row.gallery.map((item) => {
        this.gallery.push({
          name: item,
          percentage: 100,
          status: 'finished',
          uid: item,
          url: item
        })
      })
      this.floatingLayer = params.row.floatingLayer
      this.editorData = params.row.about
      this.exhibition = {
        name: params.row.name, // 展览简介
        about: params.row.about, // 展览简介
        pic: params.row.pic,
        time: [params.row.beginDate, params.row.endDate],
        category: params.row.category, // 类别标签
        floatingLayer: params.row.floatingLayer, // 浮层图
        gallery: params.row.gallery, // 介绍轮播图
        location: params.row.location, // 地点
        matter: params.row.matter, // 注意事项
        notice: params.row.notice, // 购票须知
        pic: params.row.pic // 封面图
      }
      this.time = [params.row.beginDate, params.row.endDate]
      this.ticketList = params.row.ticketTypeLists
    },
    // 增加票种
    addTicket() {
      console.log(this.isCustom)
      this.ticketList.push({
        price: null, // 价格
        remark: '', // 备注
        typeName: '' // 	票种名称
      })
    },
    // 减少票种
    reduceTicket() {
      if (this.ticketList.length <= 0) return false
      this.ticketList = this.ticketList.slice(0, -1)
    }
  }
}
</script>

<style scoped>
</style>
